<template>
  <view class="container">
	<custom-nav-bar
	      title="六爻排盘"
	      subtitle="专业预测，快速排盘"
		  bg-color="#4B79FF"
	    />
    <!-- 主体内容区域 -->
    <scroll-view 
      class="content"
      scroll-y
      :style="{ 
        height: `calc(100vh - ${navHeight}rpx)-${statusBarHeight}rpx)`,
        paddingTop: `${navHeight}rpx`,
      }"
    >
      <!-- 查询面板 -->
      <query-panel 
        v-model="hexagramCode"
        @search="onSearch"
      />
      
      <view class="list-container">
              <!-- 未输入查询码，显示全部列表 -->
              <view v-if="!this.hexagramCode.length">
                <view
                  class="list-item"
                  v-for="(item, index) in this.yaoDataList"
                  :key="item.id"
                  @click="goToDetail(item)"
                >
                  <view class="item-header">
                    <text class="item-title">{{ item.yaoTitle }}</text>
                    <text class="item-time">{{ formatDate(item.yaoDateTime) }}</text>
                  </view>
                  <view class="item-content">
                    <view class="content-left">
                      <text class="label">卦事：</text>
                      <text class="value">{{ item.yaoTitle }}</text>
                    </view>
                    <view class="content-right">
                      <text class="label">动爻：</text>
                      <text class="value">{{ item.yaoTitle }}</text>
                    </view>
                  </view>
                  <view class="item-footer">
                    <text class="tag" :class="item.yaoTitle === '吉' ? 'good' : 'bad'">
                      吉
                    </text>
                    <text class="result">{{ item.yaoTitle }}</text>
                  </view>
                </view>
              </view>
      
              <!-- 输入查询码，显示查询结果 -->
              <view v-else>
                <view v-if="this.searchResults.length === 0" class="no-results">
                  未找到匹配的数据
                </view>
                <view
                  class="list-item"
                  v-for="(item, index) in this.searchResults"
                  :key="item.id"
                  @click="goToDetail(item)"
                >
                  <view class="item-header">
                    <text class="item-title">{{ item.yaoTitle }}</text>
                    <text class="item-time">{{ formatDate(item.yaoDateTime) }}</text>
                  </view>
                  <view class="item-content">
                    <view class="content-left">
                      <text class="label">卦事：</text>
                      <text class="value">{{ item.yaoTitle }}</text>
                    </view>
                    <view class="content-right">
                      <text class="label">动爻：</text>
                      <text class="value">{{ item.yaoTitle }}</text>
                    </view>
                  </view>
                  <view class="item-footer">
                    <text class="tag" :class="item.yaoTitle === '吉' ? 'good' : 'bad'">
                      吉
                    </text>
                    <text class="result">{{ item.yaoTitle }}</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
</template>

<script>
import { ref, reactive, onMounted,onActivated  } from 'vue'
import { Solar, Lunar } from 'lunar-javascript'
import QueryPanel from '@/components/QueryPanel.vue'
import { calculateHexagram } from '@/utils/hexagramUtil'
import CustomNavBar from '@/components/CustomNavBar.vue'
export default {
   
  components: {
      QueryPanel,
      CustomNavBar
    },
	data() {
	     return {
	        yaoDataList: [],
			hexagramCode: '',
			searchResults: []
	     };
	},
	onShow() {
		console.log("onShow===");
		this.loadYaoData()
	},
	methods:{
		loadYaoData() {
			// 从本地存储中读取所有ID
			const keys = uni.getStorageSync('keys') || [];
			this.yaoDataList = keys.map(key => {
			  const storedUserData = uni.getStorageSync(key);
			  return storedUserData ? JSON.parse(storedUserData) : null;
			}).filter(item => item !== null);	
			console.log('yaoDataList loaded from local storage:', this.yaoDataList);  	     
		},
		formatDate(date) {
			 return new Date(date).toISOString().replace('T', ' ').substring(0, 19);
		},
		onSearch(code) {
			this.hexagramCode = code;
			if (code.length === 0) {
			  uni.showToast({
				title: '请输入查询内容',
				icon: 'none'
			  });
			  return;
			}
			console.log('onSearch  ===');
			const foundData = this.yaoDataList.find(item => item.yaoTitle.includes(code));
			if (foundData) {
			  // this.searchResults = [foundData];
			  this.$set(this.searchResults, 0, foundData);
			  console.log('onSearch  ===this.searchResults :',this.searchResults );
			} else {
			  this.searchResults = [];
			  uni.showToast({
				title: '未找到匹配的数据',
				icon: 'none'
			  });
			}      
		},
		goToDetail(item) {
		  // uni.navigateTo({
		  //   url: `/pages/detail/detail?id=${item.id}`,
		  //   success: () => {
		  //     const eventChannel = uni.getOpenerEventChannel();
		  //     eventChannel.emit('acceptDataFromOpener', { data: item });
		  //   }
		  // });    
		  	uni.navigateTo({
		  		    url: `/pages/listindex/listindex?data=${JSON.stringify(item)}`
		  	});
		}
	},
    setup() {
      const sysInfo = uni.getSystemInfoSync();
      const statusBarHeight = ref(sysInfo.statusBarHeight + 40);
      const navHeight = ref(statusBarHeight.value + 60); // 增加导航栏高度
      return {
        statusBarHeight,
        navHeight ,
      };
    }
  };
  </script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.list-container {
  .list-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .item-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .item-time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .item-content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .content-left,
      .content-right {
        display: flex;
        align-items: center;

        .label {
          font-size: 28rpx;
          color: #666;
        }

        .value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
	
	.no-results {
	  text-align: center;
	  font-size: 28rpx;
	  color: #666;
	  margin-top: 20rpx;
	}

    .item-footer {
      display: flex;
      align-items: center;

      .tag {
        padding: 4rpx 16rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
        margin-right: 16rpx;

        &.good {
          background-color: #e8f5e9;
          color: #4caf50;
        }

        &.bad {
          background-color: #ffebee;
          color: #f44336;
        }
      }

      .result {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}
</style>